JavaScript 的陣列是一種用於儲存多個值的資料結構，提供了許多強大的方法和屬性來處理和操作這些值。

1. 陣列的建立與初始化

陣列可以使用不同的方法創建：

// 使用字面量方式創建
let fruits = ['apple', 'banana', 'cherry'];

// 使用 Array 構造函數
let numbers = new Array(1, 2, 3, 4);

2. 陣列的訪問與修改

可以使用索引來訪問和修改陣列元素：

let colors = ['red', 'green', 'blue'];
console.log(colors[1]); // green

colors[1] = 'yellow';
console.log(colors); // ['red', 'yellow', 'blue']

3. 常用陣列方法

3.1 添加和刪除元素

• push()：在陣列末尾添加一個或多個元素。

fruits.push('orange'); // ['apple', 'banana', 'cherry', 'orange']

• pop()：刪除並返回陣列的最後一個元素。

let lastFruit = fruits.pop(); // 'orange'

• shift()：刪除並返回陣列的第一個元素。

let firstFruit = fruits.shift(); // 'apple'

• unshift()：在陣列開頭添加一個或多個元素。

fruits.unshift('kiwi'); // ['kiwi', 'banana', 'cherry']

3.2 查找和排序

• indexOf()：返回指定元素在陣列中的第一個索引，若不存在則返回 -1。

let index = fruits.indexOf('banana'); // 1

• sort()：對陣列進行排序。

let sortedFruits = fruits.sort(); // ['banana', 'cherry', 'kiwi']

• reverse()：反轉陣列的順序。

fruits.reverse(); // ['kiwi', 'cherry', 'banana']

3.3 遍歷陣列

• forEach()：對每個元素執行指定的函數。

fruits.forEach((fruit) => {
    console.log(fruit);
});

• map()：創建一個新陣列，包含通過指定函數處理的每個元素。

let fruitLengths = fruits.map(fruit => fruit.length); // [4, 6, 6]

3.4 過濾與查找

• filter()：根據條件創建一個新陣列，只包含符合條件的元素。

let longFruits = fruits.filter(fruit => fruit.length > 5); // ['banana', 'cherry']

• find()：返回陣列中符合條件的第一個元素。

let foundFruit = fruits.find(fruit => fruit.startsWith('b')); // 'banana'

4. 陣列的結構與複雜性

4.1 多維陣列

陣列可以嵌套其他陣列，形成多維陣列。

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // 6

4.2 使用 flat() 和 flatMap()

• flat()：將多維陣列展平為一維陣列。

let nestedArray = [1, [2, 3], [4, 5, [6, 7]]];
let flatArray = nestedArray.flat(2); // [1, 2, 3, 4, 5, 6, 7]

• flatMap()：先映射然後展平，通常用於處理嵌套結構。

let arr = [1, 2, 3];
let result = arr.flatMap(x => [x * 2]); // [2, 4, 6]

5. 陣列的性能考量

• 不建議頻繁地在陣列前端插入或刪除元素，因為這會導致所有後續元素的重新排列，影響性能。相反，使用鏈表結構在需要時會更有效。

6. 陣列與函數的結合

可以將陣列傳遞給函數以處理和操作數據。

function processArray(arr) {
    return arr.map(num => num * 2);
}

let numbers = [1, 2, 3, 4];
let doubled = processArray(numbers); // [2, 4, 6, 8]

7. 陣列的擴展運算符

擴展運算符 (...) 可用於快速展開陣列。

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

8. 陣列的不可變性

透過使用 Object.freeze() 將陣列變為不可變：

const immutableArray = Object.freeze([1, 2, 3]);
immutableArray[0] = 10; // 不會有錯誤，但值不會改變
console.log(immutableArray); // [1, 2, 3]